package com.aixi.desktop.ui

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material3.Card
import androidx.compose.material3.CenterAlignedTopAppBar
import androidx.compose.material3.Divider
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.LargeTopAppBar
import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.MediumTopAppBar
import androidx.compose.material3.Slider
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.datastore.preferences.core.Preferences
import androidx.datastore.preferences.core.edit
import com.aixi.desktop.data.AppConfigStore
import com.aixi.desktop.data.AppConfigStore.appConfigStore
import kotlinx.coroutines.GlobalScope
import kotlinx.coroutines.flow.collectLatest
import kotlinx.coroutines.launch

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun WidgetTimeConfig() {
    Column(
        modifier = Modifier
            .fillMaxSize(1.0f)
            .background(color = Color(0x1AB7B7E5))
    ) {
        CenterAlignedTopAppBar(title = {
            Text(text = "配置桌面小插件")
        }, navigationIcon = {
            val nav = LocalNavHostController.current
            Icon(imageVector = Icons.Filled.ArrowBack,
                contentDescription = "返回",
                modifier = Modifier.clickable {
                    nav?.popBackStack()
                })
        })
        Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
            Card(
                modifier = Modifier
                    .padding(horizontal = 21.dp)
                    .padding(top = 20.dp)
                    .shadow(
                        elevation = 10.dp,
                        spotColor = Color(0x1F000000),
                        ambientColor = Color(0x1F000000)
                    )
                    .background(color = Color(0xFFFFFFFF), shape = RoundedCornerShape(size = 22.dp))
            ) {
                intRange(
                    "字体大小",
                    20,
                    AppConfigStore.STORE_KEY_WIDGET_INT_TIME_FONT_SIZE,
                    15,
                    10..150
                )
            }
            Card(
                modifier = Modifier
                    .padding(horizontal = 21.dp)
                    .padding(top = 20.dp)
                    .shadow(
                        elevation = 10.dp,
                        spotColor = Color(0x1F000000),
                        ambientColor = Color(0x1F000000)
                    )
                    .background(color = Color(0xFFFFFFFF), shape = RoundedCornerShape(size = 22.dp))
            ) {
                Column {
                    intRange(
                        "字体颜色 R",
                        0,
                        AppConfigStore.STORE_KEY_WIDGET_INT_TIME_FONT_COLOR_R,
                        50,
                        0..255
                    )
                    Divider(modifier = Modifier.padding(horizontal = 20.dp))
                    intRange(
                        "字体颜色 G",
                        0,
                        AppConfigStore.STORE_KEY_WIDGET_INT_TIME_FONT_COLOR_G,
                        50,
                        0..255
                    )
                    Divider(modifier = Modifier.padding(horizontal = 20.dp))
                    intRange(
                        "字体颜色 B",
                        0,
                        AppConfigStore.STORE_KEY_WIDGET_INT_TIME_FONT_COLOR_B,
                        50,
                        0..255
                    )
                    Divider(modifier = Modifier.padding(horizontal = 20.dp))
                    intRange(
                        "字体颜色 A",
                        0xFF,
                        AppConfigStore.STORE_KEY_WIDGET_INT_TIME_FONT_COLOR_A,
                        50,
                        0..255
                    )
                }
            }
        }
    }
}

@Composable
fun intRange(
    title: String, initFontSize: Int, preIntKey: Preferences.Key<Int>, steps: Int, range: IntRange
) {
    var fontSizevalue by remember {
        mutableStateOf(initFontSize)
    }
    val context = LocalContext.current;
    LaunchedEffect(key1 = preIntKey, block = {
        context.appConfigStore.data.collectLatest {
            fontSizevalue = it[preIntKey] ?: initFontSize
        }
    })
    inputSlider(
        title,
        fontSizevalue,
        onValueChange = { value ->
            GlobalScope.launch {
                context.appConfigStore.edit {
                    it[preIntKey] = value.toInt()
                }
            }
        },
        steps,
        range,
    )
}


@Composable
fun inputSlider(
    title: String, initValue: Int, onValueChange: (Float) -> Unit, steps: Int, range: IntRange
) {
    Row(modifier = Modifier.padding(vertical = 17.dp, horizontal = 23.dp)) {
        Column {
            Text(
                text = "$title ($initValue)", style = LocalTextStyle.current.copy(fontSize = 14.sp)
            )
            Slider(
                value = initValue.toFloat(),
                steps = steps,
                valueRange = range.first.toFloat().rangeTo(range.last.toFloat()),
                onValueChange = {
                    onValueChange(it)
                },
            )
        }
    }
}
